<template>
  <div class="ArticleOverview-container">
    <div class="Total-content">
      <el-row :gutter="20">
        <el-col :span="6">
          <div>
            <el-statistic title="文章总数">
              <template slot="formatter">
                {{ articleTotal }}
              </template>
            </el-statistic>
          </div>
        </el-col>
        <el-col :span="6">
          <div>
            <el-statistic title="用户数">
              <template slot="formatter">
                {{ userTotal }}
              </template>
            </el-statistic>
          </div>
        </el-col>
        <el-col :span="6">
          <div>
            <el-statistic title="发布活动数">
              <template slot="formatter">
                <i style="color: red;">NaN</i>
              </template>
            </el-statistic>
          </div>
        </el-col>
        <el-col :span="6">
          <div>
            <el-statistic title="在线人数">
              <template slot="formatter">
                <i style="color: red;">NaN</i>
              </template>
            </el-statistic>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="view-content" ref="ArticleOverview"></div>
    <!-- 这是文章总览大屏 -->
  </div>
</template>

<script>
import { Column } from '@antv/g2plot';
import { getArticleTotalAPI } from '@/api/article';

export default {
  data() {
    return {
      title: "增长人数",
      userTotal:0,
      // onlineTotal:0,
      articleTotal: 0,
      data: []
    }
  },
  mounted() {
    this.getDataList();
  },
  methods: {
    async getDataList() {
      try {
        const res = await getArticleTotalAPI();
        this.articleTotal = res.data.articleTotal;
        this.userTotal = res.data.userTotal;
        // this.onlineTotal = res.data.onlineTotal;
        this.data = res.data.rows;
        this.load(); // 确保数据加载完成后再渲染图表
      } catch (error) {
        console.error('Error fetching data:', error);
      }
    },
    load() {
      if (this.data.length === 0) {
        console.warn('No data to render.');
        return;
      }
      // 将数据转换为柱状图组件期望的格式
      const chartData = this.data.map(item => ({
        type: item.type, // 将 type 字段作为 x 轴的值
        sales: item.sales, // 将 sales 字段作为 y 轴的值
      }));
      // 渲染图表
      const barPlot = new Column(this.$refs.ArticleOverview, {
        data: chartData,
        xField: 'type',
        yField: 'sales',
        xAxis: {
          label: {
            autoHide: true,
            autoRotate: false,
          },
        },
        meta: {
          type: {
            alias: '类别',
          },
          sales: {
            alias: '数量',
          },
        },
        minColumnWidth: 20,
        maxColumnWidth: 20,
      });
      barPlot.render();
    }
  }
}
</script>

<style>
.ArticleOverview-container {
  margin: 20px;

  .Total-content {
    margin-bottom: 10px;
  }
}
</style>
